import $ from 'jquery'

export default function initBackground(element) {
  if (!element) {
    return
  }
  const colors = [
    [255, 33, 33],
    [75, 92, 196],
    [128, 29, 174],
    [255, 71, 119],
    [33, 166, 117],
    [250, 140, 53],
    [187, 85, 72]
  ]
  const colorIndices = [0, 1, 2, 3]
  const gradientSpeed = 0.002
  const $ele = $(element)
  let step = 0
  let timer = null

  function update(ele) {
    let c0_0 = colors[colorIndices[0]]
    let c0_1 = colors[colorIndices[1]]
    let c1_0 = colors[colorIndices[2]]
    let c1_1 = colors[colorIndices[3]]

    let istep = 1 - step
    let r1 = Math.round(istep * c0_0[0] + step * c0_1[0])
    let g1 = Math.round(istep * c0_0[1] + step * c0_1[1])
    let b1 = Math.round(istep * c0_0[2] + step * c0_1[2])
    let color1 = 'rgb(' + r1 + ',' + g1 + ',' + b1 + ')'

    let r2 = Math.round(istep * c1_0[0] + step * c1_1[0])
    let g2 = Math.round(istep * c1_0[1] + step * c1_1[1])
    let b2 = Math.round(istep * c1_0[2] + step * c1_1[2])
    let color2 = 'rgb(' + r2 + ',' + g2 + ',' + b2 + ')'

    ele
      .css({
        background: '-webkit-gradient(linear, left top, right top, from(' + color1 + '), to(' + color2 + '))'
      })
      .css({
        background: '-moz-linear-gradient(left, ' + color1 + ' 0%, ' + color2 + ' 100%)'
      })

    step += gradientSpeed
    if (step >= 1) {
      step %= 1
      colorIndices[0] = colorIndices[1]
      colorIndices[2] = colorIndices[3]

      colorIndices[1] = (colorIndices[1] + Math.floor(1 + Math.random() * (colors.length - 1))) % colors.length
      colorIndices[3] = (colorIndices[3] + Math.floor(1 + Math.random() * (colors.length - 1))) % colors.length
    }
  }

  function loop($ele) {
    timer && clearTimeout(timer)
    if (!$ele || !$ele.length) {
      return
    }

    update($ele)
    timer = setTimeout(() => {
      loop($ele)
    }, 10)
  }

  loop($ele)
}
